<template>
  <div class="range-map">
    <ts-header title="选择接单区域" back></ts-header>
    <flex-view>
      <div class="map-container">
        <iframe id="test"
                :src='amapURL'></iframe>
      </div>
    </flex-view>
  </div>
</template>

<script>
  import {amapKey} from '../../assets/js/init'

  export default {
    name: 'rangeMap',
    data() {
      return {
        amapURL: '',
        //经纬度
        location: '',
        //地址全称
        address: ''
      }
    },
    created() {
      let {center,range} = this.$route.query;
      this.amapURL = `https://m.amap.com/picker/?keywords=写字楼,小区,学校&zoom=15&center=${center}&radius=${range}&total=20&key=${amapKey}`;
    },
    methods: {
      async handle(e) {
        let {name, location, address} = e.data;
        if (name && location && address) {
          this.address = address + name;
          this.location = location;
          this.$router.isBack = true;
          this.$router.replace({
            path: '/range', query: {
              address: this.address,
              location
            }
          });
        }
      }
    },
    mounted() {
      var iframe = document.getElementById('test').contentWindow;
      document.getElementById('test').onload = function () {
        iframe.postMessage('hello', 'https://m.amap.com/picker/');
      };
      let _this = this;
      window.addEventListener("message", this.handle, false);
    },
    destroyed() {
      this.location = undefined;
      this.address = undefined;
      window.removeEventListener('message', this.handle, false);
    }
  }
</script>
<style scoped>
  #test {
    height: 100%;
    width: 100%;
  }
</style>
